import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
   Table, Button,Row,Col,Pagination,message,Avatar,Modal
} from 'antd';
import styles from './index.less';
import docCookies from "../../common/DocCookies";
const radioImageSrcs = [require("../../../public/audioImage3.png"),require("../../../public/audioImage4.gif") ];

export default class LotteryWinUserList extends PureComponent {
  state = {
    loadMethod:()=>{},
    addWriter:(recode)=>{},
    pageNo:1,
    pageSize:50,
    total:0,
    lotteryId:'',
    winUserRecord:undefined,
    dispatch:'',
    rsId:docCookies.getItem("rsId"),
    videoVisible:false,
    audioSrc:"",
    radioValue:1.0,
    msgId:"",
    params:false,
  };

  loadLotteryUserList(searchText){
    var me = this;
    const dispatch = this.state.dispatch;
    // const { dispatch } = this.props;
    const pageNo = this.state.pageNo ;
    const pageSize = this.state.pageSize ;
    // 需要传递的参数信息
    const params = {
      lotteryId:this.state.lotteryId,
      pageNo: pageNo,
      pageSize: pageSize,
    };
    if(searchText) params.searchText=searchText;
    dispatch({
      type: 'lottery/listLotteryResultById',  //请求的action
      payload:params,
      callback:(data) =>{
        console.log(data)
        if(data.informStatus === '1'){
          this.props.allInformStatus(false);
        }
        me.setState({
          params:true,//区分单个通知还是一键通知,true单个通知
          winUserRecord:data.list,
          pageNo:data.pageNo,
          pageSize:data.pageSize,
          total:data.total,
          informButton:false,
        });
      }
    });
  }

  handleTableChange = (page, pageSize) => {
    this.state.pageNo = page;
    this.state.pageSize = pageSize;
    this.loadLotteryUserList();
  }

  informWinUser(record,index) {
    const dispatch = this.state.dispatch;
    // 需要传递的参数信息
    const params = {
      id:JSON.stringify([record.id]),
      lotteryId:this.state.lotteryId,
      rsId:this.state.rsId,
      msgId:record.msgId,
      informStatus:1,
    };
    this.props.informButton(true);
    dispatch({
      type: 'lottery/informWinUser',  //请求的action
      payload:params,
      callback:(data) =>{
        if(data.data.allInformStatus === 1) {
          this.props.allInformStatus(false);
        }
        message.success(data.msg);
        this.loadLotteryUserList();
      }
    });
  }

  handleMusicPlay = (id,msgAttSrc) => {
    const radioValue = this.state.radioValue;
    var audio = this.refs.audioMusicPlay;

    const msgId = this.state.msgId;
    var curMsgRadioListItem =  document.getElementById("radioImageId"+id);
    var oldMsgRadioListItem = document.getElementById("radioImageId"+msgId);
    if(oldMsgRadioListItem != undefined && msgId != id){
      oldMsgRadioListItem.src = radioImageSrcs[0];
    }

    // //设置好id和src
    this.setState({
      msgId:id,
      audioSrc:msgAttSrc,
    },() => {
      audio.onended = function () {
        curMsgRadioListItem.src = radioImageSrcs[0];
      }
      audio.playbackRate = radioValue;
      //如果ID不相等，一定是播放，如果ID相等则取反
      //true 指示音频/视频已暂停
      if(msgId != id){
        curMsgRadioListItem.src = radioImageSrcs[1];
        audio.play();
      }else {
        if(audio.paused){
          curMsgRadioListItem.src = radioImageSrcs[1];
          audio.play();
        }else{
          curMsgRadioListItem.src = radioImageSrcs[0];
          audio.pause();
        }
      }
    });
    event.stopPropagation();
  }


render() {
    var me = this;
    let {winUserRecord,total ,pageNo ,pageSize,showDelBtn,dispatch,lotteryId,newDataParams} = this.props;
    if(!this.state.params){
      this.setState({
        winUserRecord:winUserRecord,
      })
    }
    if(newDataParams) {
      this.setState({
        winUserRecord:winUserRecord,
      })
    }
    console.log('index')
    console.log(winUserRecord)
    if(typeof(me.state.winUserRecord) == "undefined") {
      me.setState({
        winUserRecord:winUserRecord,
        dispatch:dispatch,
        lotteryId:lotteryId
      })
    }
    const addWriterColumns = [
      {
        title: '头像',
        dataIndex: 'headimgurl',
        key: 'headimgurl',
        width:'7%',
        render: (text,record,index) => (
          <Avatar src={record.headimgurl.match(/^(http|https):\/\//)?record.headimgurl : 'http://test22umake.oss-cn-beijing.aliyuncs.com/'+record.headimgurl} />
        ),
      },
      {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
      width:'10%'
      },
      {
        title: '账号(手机号)',
        dataIndex: 'userPhone',
        key: 'userPhone',
        width:'10%'
      },
      {
        title: '消息内容',
        dataIndex: 'msgAttachmentAddr',
        key: 'msgAttachmentAddr',
        width:'25%',
        render: (text,record,index) => (
          record.msgContentType == 1 ?
            <div style={{marginLeft:12}}>
              <div onClick={() => this.handleMusicPlay(record.id,record.msgAttachmentAddr)} style={{float:"left", height:26,width:135,backgroundImage:"url("+require("../../../public/audioImage.png")+")",cursor:"pointer" }}>
                <img src={radioImageSrcs[0]} name="radioImageName" id={"radioImageId"+record.id} style={{marginLeft:10, height:26,width:26}}/>
              </div>
              <div style={{float:"left",marginTop:3}}>{record.radioLen}"</div>
            </div>
            :<div style={{marginLeft:12}}>
            {record.msgAttachmentAddr}</div>
        )
      },
      {
        title: '消息来源',
        dataIndex: 'messageFrom',
        key: 'messageFrom',
        width:'8%',
        render: (text,record,index) => (
          <span>
          {
            record.messageFrom == "0"?
              <div > 微信 </div>
              :
              <div > app </div>
          }
        </span>
        ),
      },
      {
        title: '消息时间',
        dataIndex: 'msgTime',
        key: 'msgTime',
        width:'13%'
      },
      {
        title: '获奖时间',
        dataIndex: 'winTime',
        key: 'winTime',
        width:'13%'
      },
      {
        title: '通知状态',
        dataIndex: 'informStatus',
        key: 'informStatus',
        width:'8%',
        render: (text,record,index) => (
          <span>
          {
            record.informStatus == "0"?
              <div > 未通知 </div>
              :
              <div > 已通知 </div>
          }
        </span>
        ),
      },
      {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (text,record,index) => (
        <span>
          {
            record.informStatus == "1"?
              <a disabled="true"> 通知 </a>
            :
              <a href="javascript:void(0)" onClick={() => this.informWinUser(record,index)}> 通知 </a>
          }
        </span>
      ),
    }];

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    return (
      <div>
        <Row gutter={16}>
          <Col className="gutter-row" span={24}>
            <Table dataSource={this.state.winUserRecord} columns={addWriterColumns} style={{ width: '100%' }}
                   pagination={paginationProps}  />
          </Col>
        </Row>

        <div>
          {/* 音乐播放组件*/}
          <audio ref="audioMusicPlay"
                 style={{display:"none"}}
                 src={this.state.audioSrc}
                 preload={"auto"}
          >
            您当前的浏览器不支持该播放控件
          </audio>
        </div>
      </div>
    );
  }
}
